<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>平台管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/css/plat-style.css" media="all">
    <style>
        thead tr th{text-align: center!important;}
        tr td{text-align: center!important;}
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
<!--                 <form action="/sys/address" id="seachFrom" class="layui-form"> -->
                    <div class="layui-card-body layui-form">
                        <%-- 查询条件设置 --%>
                        <div class="layui-container layui-form-item" style="padding-bottom: 50px">
                            <div class="layui-col-md12">
                                <div class="layui-col-md3">
                                    <div class="layui-col-sm3" style="line-height: 38px">省份：</div>
                                    <div class="layui-col-md7">
                                        <select name="proId" class="address" data-flag="1">
                                            <option value="">请选择</option>
                                            <c:forEach items="${allList}" var="sup">
                                                <option value="${sup.id}">${sup.name}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-col-sm3" style="line-height: 38px">市区：</div>
                                    <div class="layui-col-sm7">
                                        <select name="cityId" class="city" data-flag="2">
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-col-sm3" style="line-height: 38px">县/区域：</div>
                                    <div class="layui-col-sm8">
                                        <select name="areaId" class="area" data-flag="3">
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-col-sm3" style="line-height: 38px">状态：</div>
                                    <div class="layui-col-sm8">
                                        <select name="status" data-flag="4">
                                            <option value="">请选择</option>
                                            <option value="1">开启</option>
                                            <option value="0">关闭</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs12">&nbsp;</div>
                            <div class="layui-col-md12">
                                <div class="layui-col-md3 layui-col-md-offset9">
                                    <div class="layui-col-sm9 layui-col-sm-offset3">
                                        <button class="layui-btn layuiadmin-btn-list" lay-submit
											lay-filter="LAY-app-contlist-search">
											查询
										</button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md12"><hr></div>
                        </div>
                        <%-- 数据展示 --%>
                        <table class="layui-table" id="table" lay-filter="table">
                            
                        </table>
                        
                        <script type="text/html" id="toolbar">
	                        <div class="layui-btn-container">
								<a class="layui-btn layui-btn-warn layui-btn-xs" lay-event="edit">编辑</a>
								{{#  if(d.status == 1){ }}
									<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="forbidden">禁用</a>
								{{#  } else if (d.status == 0) { }}
									<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="useing">启用</a>
								{{#  } }}
						    </div>
                        </script>
                    </div>
<!--                 </form> -->
            </div>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','form', 'table'], function(){
        var $ = layui.$,layer = layui.layer,form = layui.form,
            element = layui.element, table = layui.table;
        form.on('select',function(data){
            var dom = data.elem;
            var flag = $(dom).data('flag');
            var id = data.value;
            if(flag===1 || flag===2){
                $.ajax({
                    url: "/sys/queryAddressNoPage",
                    data: {"pid":id},
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        var html = '<option value="">请选择</option>';
                        $.each(data.data, function (i, v) {
                            html += '<option value="' + v.id + '" >' + v.name + '</option>';
                        });
                        if(flag===1){
                        	$(".city").html("");
                            $(".city").append(html);
                        }else if(flag===2){
                        	$(".area").html("");
                            $(".area").append(html);
                        }
	                    form.render("select");
                    }
                });
            }
        });
        
        table.render({
			elem : '#table',
			url : '/sys/queryAddressList',
			page:true,
			request: {
				pageName: 'current', //页码的参数名称，默认：page
				limitName: 'size' //每页数据量的参数名，默认：limit
			},
			cols : [[ 
				{field : 'id', title:'编号'},
				{field : 'name', title:'中文名称'},
				{field : 'level', title : '层级'},
				{title : '经纬度', minWidth : 200,
					templet : function (row) {
						return row.longitude+", "+row.latitude
					}
				},
				{field : 'status', title : '开启',
					templet : function (row) {
						if (row.status == 1) {
							return "开启";
						} else if (row.status == 0) {
							return "关闭";
						}
					}
				},
				{title:'操作', templet : '#toolbar'}
			]],
			skin : "row",
			even: true,
			size:"lg"
		});
        
        var active = {
        	updateStatus : function (status, msg, id) {
        		layer.confirm('确认要'+msg+'吗？',function(index) {
        	        $.ajax({
        	            url: "/sys/editAddressStatus",
        	            data: {'status': status, 'id' : id},
        	            dataType: "json",
        	            type: "post",
        	            success: function (data) {
        	                if (data.status) {
        	                    layer.close(index);
        	                    layer.msg(msg+'成功', {icon: 1});
        	                    setTimeout(function () {
									window.location.reload();
        	                    }, 1000)
        	                } else {
        	                    layer.close(index);
        	                    layer.msg(msg+'失败', {icon: 2})
        	                }
        	            }
        	        })
        	    })
        	},
        	edit: function (id) {
                layer.open({
                    title:'新增/编辑地址',
                    type: 2,
                    area: ['550px', '520px'],
                    content: '/sys/addressEdit?id='+id
                });
            }
        }
        
      	//监听事件
		table.on('tool(table)', function(obj){
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			
			var type = "updateStatus";
			var status = 0;
			var msg = "禁用";
			if (layEvent === 'forbidden') {// 禁用
				active[type] && active[type].call(this, status, msg, data.id);
			} else if (layEvent === "useing") {
				status = 1;
				msg = "启用";
				active[type] && active[type].call(this, status, msg,  data.id);
			} else if (layEvent === 'edit') {
				active[layEvent] && active[layEvent].call(this, data.id);
			}
		});
        
      //监听搜索
	    form.on('submit(LAY-app-contlist-search)', function(data){
	      var field = data.field;
	      //执行重载
	      table.reload('table', {
	        where: field
	      });
	    });
    });
</script>
</body>
</html>